<template id="Immediate_evaluation">
	<div class="Immediate_evaluation">

		<!--头部-->
		<div class="about_header">

			<div class="about_title">
				<router-link to="/doudle_assess"><img src="../../assets/images/class/jiantou_03.png" /></router-link>

				<p>立即评价</p>
				<div class="about_select">
					<div class="about_ing"><span @click.stop="push">发布</span></div>

				</div>

			</div>
		</div>
		<!--头部结束-->

		<div class="doudle_main_dl">
			<div class="doudle_dl">
				<dl>
					<dt><img src="../../assets/images/class/about_coach.png"/></dt>
					<dd>
						<p>王莹莹</p>
						<p>预约课程:减脂YOGA</p>
						<p>预约时间:2018-08-31 17:30</p>
					</dd>
				</dl>
			</div>
		</div>

		<!--对教练进行评价-->
		<div class="Immediate_count">

			<div class="Immediate_wrap">

				<div class="Immediate_top">
					<textarea name="" rows="" cols="" placeholder="课程是否满足您的期待?请对教练进行评价..."></textarea>
				</div>
				<input @change="fileChange($event)" type="file" id="upload_file" multiple style="display: none" />
				<div class="Immediate_photo">
					<ul>
						<li @click.stop="chooseType"><img src="../../assets/images/Immediate_evaluation/photo_07.png" />
							<p>添加图片</p>
						</li>
						<li><img src="../../assets/images/Immediate_evaluation/jia_10.png" /></li>
						<li><img src="../../assets/images/Immediate_evaluation/jia_10.png" /></li>
					</ul>
				</div>
				<!--<div class="add-img" v-show="imgList.length">
					<p class="font14">图片(最多6张，还可上传<span v-text="6-imgList.length"></span>张)</p>
					<ul class="img-list">
						<li v-for="(url,index) in imgList">
							<img class="del" src="../../assets/images/become_coach/become_20.png" @click.stop="delImg(index)" />
							<!-- del删除样式，icon字体图标需要自己找哦-->
							<!--<img v-lazy="url.file.src">
						</li>
					</ul>
				</div>-->

				<!--<div class="add-img" v-show="imgList.length">
					<p class="font14">图片(最多6张，还可上传<span v-text="6-imgList.length"></span>张)</p>
					<ul class="img-list">
						<li v-for="(url,index) in imgList">
							<img class="del" src="../../assets/images/become_coach/become_20.png" @click.stop="delImg(index)" />
						<yd-lightbox>
						<div class="app-bg">
							<yd-lightbox-img class="app-bg" :original="url.file.src" v-lazy:background-image="{src: url.file.src, error: require('../../assets/images/about_coach/about_coach_02.png'), loading: require('../../assets/images/about_coach/about_coach_02.png')}">
							</yd-lightbox-img>
								</div>
							</yd-lightbox>
						</li>
					</ul>
				</div>-->

			</div>

		</div>
		<!--对教练进行评价结束-->

		<!--给教练评分-->

		<!--给教练评分结束-->
		<div class="Immediate_down">
			<div class="Immediate_vail">
				<img src="../../assets/images/Immediate_evaluation/quan_17.png" />
				<span>教练评分</span>
			</div>
			<div class="Immediate_xing">
				<p>课程质量</p>
				<div class="Immediate_mether">
					<img src="../../assets/images/Immediate_evaluation/xing_yellow_21.png" />
					<img src="../../assets/images/Immediate_evaluation/xing_yellow_21.png" />
					<img src="../../assets/images/Immediate_evaluation/xing_gray.png" />
					<img src="../../assets/images/Immediate_evaluation/xing_gray.png" />
					<img src="../../assets/images/Immediate_evaluation/xing_gray.png" />
				</div>
			</div>
		</div>

	</div>
</template>
<script>
	export default {
		name: "Feedback",
		data() {
			return {
				showFace: false,
				imgList: [],
				size: 0,
				limit: 6, //限制图片上传的数量
				tempImgs: []
			}
		},
		methods: {
			push() {
				this.$router.push({
					path: "/about_coach",
					query: {}
				})
			},
//			chooseType() {
//				document.getElementById('upload_file').click();
//			},
//			fileChange(el) {
//				if(!el.target.files[0].size) return;
//				this.fileList(el.target);
//				el.target.value = ''
//			},
//			fileList(fileList) {
//				let files = fileList.files;
//				for(let i = 0; i < files.length; i++) {
//					//判断是否为文件夹
//					if(files[i].type != '') {
//						this.fileAdd(files[i]);
//					} else {
//						//文件夹处理
//						this.folders(fileList.items[i]);
//					}
//				}
//			},
			//文件夹处理
//			folders(files) {
//				let _this = this;
//				//判断是否为原生file
//				if(files.kind) {
//					files = files.webkitGetAsEntry();
//				}
//				files.createReader().readEntries(function(file) {
//					for(let i = 0; i < file.length; i++) {
//						if(file[i].isFile) {
//							_this.foldersAdd(file[i]);
//						} else {
//							_this.folders(file[i]);
//						}
//					}
//				});
//
//			},
//			foldersAdd(entry) {
//				let _this = this;
//				entry.file(function(file) {
//					_this.fileAdd(file)
//				})
//			},
//			fileAdd(file) {
//				if(this.limit !== undefined) this.limit--;
//				if(this.limit !== undefined && this.limit < 0) return;
//				//总大小
//				this.size = this.size + file.size;
//				//判断是否为图片文件
//				if(file.type.indexOf('image') == -1) {
//					this.$dialog.toast({
//						mes: '请选择图片文件'
//					});
//				} else {
//					let reader = new FileReader();
//					let image = new Image();
//					let _this = this;
//					reader.readAsDataURL(file);
//					reader.onload = function() {
//						file.src = this.result;
//						image.onload = function() {
//							let width = image.width;
//							let height = image.height;
//							file.width = width;
//							file.height = height;
//							_this.imgList.push({
//								file
//							});
//							console.log(_this.imgList);
//						};
//						image.src = file.src;
//					}
//				}
//			},
//			delImg(index) {
//				this.size = this.size - this.imgList[index].file.size; //总大小
//				this.imgList.splice(index, 1);
//				if(this.limit !== undefined) this.limit = 6 - this.imgList.length;
//			},
			displayImg() {

			}
		}
	}
</script>

<style>
	@import "../../assets/css/Immediate_evaluation.css";
	.app-bg>>>img {
		width: 100%;
		height: 100%;
		-webkit-transform: scale(1.03);
		-moz-transform: scale(1.03);
		-ms-transform: scale(1.03);
		-o-transform: scale(1.03);
		transform: scale(1.03);
	}
	
	textarea {
		padding: 10px;
	}
	
	.text-length {
		font-size: 14px;
		z-index: 999;
		width: 100%;
		text-align: right;
		margin-bottom: 10px;
		color: #e4e4e4;
	}
	
	.warning {
		color: #fe9900;
	}
	
	.add-img {
		width: 100%;
		padding: 10px;
	}
	
	.add-img p {
		color: #999;
	}
	
	.mui-content {
		padding-bottom: 60px;
	}
	
	.mui-content .idea {
		margin-top: 8px;
		background-color: #FFFFFF;
	}
	
	.good-item {
		text-align: center;
		width: 33%;
		max-width: 100%;
		overflow: hidden;
		padding-right: 10px;
		padding-bottom: 10px;
		float: left;
	}
	
	.good-item span {
		font-size: 15px;
		height: 30px;
		line-height: 30px;
		border-radius: 50px;
		display: block;
		width: 100%;
		color: #333;
		overflow: hidden;
		white-space: nowrap;
		text-overflow: ellipsis;
		border: 1px solid #CCCCCC;
	}
	
	.mui-table {
		padding-top: 10px;
		color: #333;
		padding-left: calc(0.5% + 10px);
	}
	
	.h-line-behind {
		line-height: 40px;
		padding-left: 10px;
	}
	
	.question {
		border: 0;
		margin-bottom: 10px;
	}
	
	.add {
		display: inline-block;
		margin-bottom: 20px;
	}
	
	.add-image {
		padding-top: 15px;
		margin-left: 10px;
		width: 80px;
		top: 20px;
		height: 80px;
		border: 1px dashed rgba(0, 0, 0, .2);
	}
	
	.add-image .icon-camera {
		font-size: 24px;
	}
	
	.good-item .choose {
		color: #fff;
		background-color: #87582E;
		color: #FFF;
		border: 0;
	}
	
	.mui-btn-block {
		border: 0;
		border-radius: 0;
		background-color: #87582E;
		color: #fff;
		margin-bottom: 0;
		bottom: 0;
	}
	
	.mui-buttom {
		position: fixed;
		width: 100%;
		bottom: 0;
		z-index: 999;
	}
	/*九宫格*/
	
	.img-list {
		width: 100%;
		overflow: hidden;
	}
	
	.img-list>li {
		float: left;
		width:30%;
		height: 100px;
		text-align: center;
		margin-top:10px;
		margin-left: 2%;
		position: relative;
	}
	
	.img-list li img:first-child{
		width: 15px;
		height: 15px;
		position: absolute;
		top: 2px;
		right: 2px;
		z-index: 999
		
	}
	.img-list>li img{
		width:100%;
		height: 100%;
		margin-left: 5px;
	}
	/*.img-list>li>div {
		position: absolute;
		left: 0;
		top: 0;
		width: 100%;
		height: 100%;
		overflow: hidden;
	}*/
	
	.img-list>li>div .app-bg {
		width: 100%;
		height: 100%;
	}
	
	.mui-fullscreen {
		z-index: 9999;
	}
	
	.del {
		
		
	}
</style>